<template>
  <div class="infinite-container" :style="topStyle">
    <mu-refresh-control :refreshing="refreshing" :trigger="trigger" @refresh="refresh"></mu-refresh-control>
    <mu-divider></mu-divider>

    <div class="express-card bgwhite mb10" >
      <div style="display:flex">
      <mu-flexbox class="card-title">
        <mu-flexbox-item>物流信息</mu-flexbox-item>
        <mu-flexbox-item class="text-right" :grow="3">
          <span>【{{postCom[postDetail.expressCcompany]}}】</span>
          <span class="t1">{{postDetail.postOrder}}</span>
        </mu-flexbox-item>
      </mu-flexbox>
      </div>

      <mu-divider></mu-divider>

      <section>
         <time-line :data="data"></time-line>
      </section>

    </div>

  </div>
</template>

<script>
import TimeLine from '@/components/TimeLine'
export default {
  components: {TimeLine},
  data () {
    return {
      postDetail: JSON.parse(sessionStorage.postDetail || '{}'),
      postCom: {
        '001': 'EMS',
        '002': '顺丰速运'
      },
      topStyle: 'top:50px;',
      refreshing: false,
      trigger: null,
      data: JSON.parse(sessionStorage.postDetail || '{}').routes.reverse()
    }
  },
  mounted () {
    // for app
    if (this.$route.query.accessToken) {
      sessionStorage.accessToken = this.$route.query.accessToken
      this.$store.commit('UPDATE_HEADERSHOW', false)
      this.topStyle = 'top:0;'
    } else {
      // this.localDoctorId = this.person.orgDoctorList[0].localDoctorId
    }
    // this.data = this.postDetail.routes.reverse()
    this.trigger = this.$el
    this.$store.commit('UPDATE_TITLE', '快递明细')
  },
  beforeDestroy () {
  },
  methods: {
    refresh () {
      window.location.reload()
    }
  }
}
</script>

<style lang="less">
@import '../../common/css/vars.less';
.express-card {
  display: block;
  .card-title {
    padding:0 .8em;
    margin: .8em 0;
    border-left: 4px solid @color-primary;
  }
  .express-item {
    padding: 8px;
  }
}
</style>
